<template>
	<div>
		<van-nav-bar
		  title="集市小法庭"
		  left-arrow
		  @click-left="onClickLeft"
		>		
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
	    </van-nav-bar>	 	
	    <div class="tips">
	    	<div style="margin-bottom: 10px;font-size: 16px;">{{formatResult(resultInfo.type)}}</div>
	    	<div style="margin-bottom: 4px;">
                                            买家遇到“{{logList.refundReason}}”问题，申请卖家{{refundType}}
	    	</div>
	    	<div>{{formatFixed2(logList.adminRefundAmount)}} 元</div>
	    </div>	  
	    
	    <div class="wrap">
		    <div class="section1">
		    	<div>
		    		<span style="color: #F22613;" v-if="resultInfo.buyerSupport">{{resultInfo.buyerSupport}}</span>
		    		<span style="color: #F22613;" v-else>0</span>
		    		人支持买家
		    	</div>
		    	<div><span style="color: #3CACEC;" v-if="resultInfo.sellerSupport">{{resultInfo.sellerSupport}}</span><span style="color: #F22613;" v-else>0</span>人支持卖家</div>
		    </div>
		    <div class="section2">
		    	<div class="left" :style="{ width: leftWidth + '%' }"></div>
		    	<div class="right" :style="{ width: rightWidth + '%' }"></div>
		    </div>
	    </div>
	    
	    <div class="next"></div>
	    
	    <div  class="goodsInfo_wrap">	    	
	    	<div class="left" :style="{backgroundImage: 'url(' + goodsInfo.goodsImage + ')'}"
>
	    	</div>
	    	<div class="right">
		    	<div class="word1 ellipsis">{{goodsInfo.comName}}</div>
		    	<div class="word2">{{formatFixed2(goodsInfo.ordersPrice)}}</div>
	    	</div>
	    </div>
	    
	    <div class="next"></div>
        <div class="tabs_wrap">
			<van-tabs color="#FFD630">
			  <van-tab title="双方陈词">			  	
			  	   <div class="list" v-for="(item,index) in historyLog" :key="index">
			  	   	 <div class="left">
			  	   	 	<img :src="item.gavatar" alt="" />
			  	   	 </div>
			  	   	 <div class="right">
			  	   	 	<div class="word1">{{item.logTitle}}</div>
			  	   	 	<div class="word2">{{item.refundNote}}</div>
			  	   	 	<div class="imgWrap" v-for="(item1,index1) in formatArr(item.refundImage)" :key="index1">
			  	   	 		<img :src="item1" alt=""/>
			  	   	 	</div>
			  	   	 </div>
			  	   </div>			  	   
			  </van-tab>
			  
			  
			  <van-tab title="交易记录">
			  	   <div class="list" v-for="(item,index) in log" :key="index">
			  	   	 <div class="left">
			  	   	 	<div style="font-size: 14px;margin-bottom: 5px;">{{formatTime(item.addtime,1)}}</div>
			  	   	 	<div style="font-size: 12px;color: #999;">{{formatTime(item.addtime,2)}}</div>
			  	   	 </div>
			  	   	 <div class="right">
			  	   	 	<div class="word1">{{item.nickName}}</div>
			  	   	 	<div class="word2">{{item.context}}</div>
			  	   	 </div>
			  	   </div>					  	   
			  </van-tab>
			  
			  
			</van-tabs>        
        </div>	    
	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
          refundId:'',
          leftWidth:50,
          rightWidth:50,
          url1:this.$api+'/marketorderservice/api/v1/market/getcourtSupportByRefundId',
          url2:this.$api+'/marketorderservice/api/v1/market/refund/log/list', 
          url3:this.$api+'/marketorderservice/api/v1/market/orders', // 获取订单详情的接口
          url4:this.$api+'/marketorderservice/api/v1/market/getOrdersLogListByOrdersId', // 交易日志的接口
          info:{},
          logList:{},
          orderId:'',
          goodsInfo:{},
          refundType:'',
          resultInfo:{},
          log:[],   // 交易记录
          historyLog:[] // 双方陈词
       }
	},
	methods: {
	   formatTime(str,type){
	   	if(str){
	   		if(type==1){
	   			let str1=str.substring(5,10)
	   			str1=str1.replace(/-/g,'.')
	   			return str1
	   		}
	   		else if(type==2){
	   			let str2=str.substring(11,16)
	   			return str2	   			
	   		}
	   	}else{
	   		return ''
	   	}
	   },
	   formatResult(num){
	   	 if(num==0){
	   	 	return '评审中…'
	   	 }else if(num==1){
	   	 	return '买家胜利！'
	   	 }else if(num==2){
	   	 	return '卖家胜利！'
	   	 }
	   },
       init(){
       	 let that=this
       	 // 获取介入信息
       	 this.$Axios2.Get(this.url1+'/'+this.refundId).then(function(res){ 
       	 	if(res.data){
	       	 	that.resultInfo=res.data
	         	let type=res.data.type
	         	let num1=res.data.buyerSupport
	         	let num2=res.data.sellerSupport
	       	 	if(type>0){
	       	 		that.leftWidth=num1*100/(num1+num2)
	       	 		that.rightWidth=num2*100/(num1+num2)
	       	 	}else{
	       	 		that.leftWidth=50
	       	 		that.rightWidth=50
	       	 	}       	 		
       	 	}else{
       	 		that.resultInfo.type=0
       	 	}
       	 })     
         // 获取订单信息
       	 this.$Axios2.Post(this.url2,{refundId:this.refundId}).then(function(res){   
           that.logList=res.data.refundRVo.refund
           that.refundType=res.data.refundRVo.refundType
           that.orderId=res.data.refundRVo.refund.ordersId
           that.historyLog=res.data.refundRVo.refundLogRVoList           
	       that.$Axios2.Get(that.url4+'/'+that.orderId).then(function(log){  
	       	  // console.log(log)
	       	  that.log=log.data   
           })
	       that.$Axios2.Get(that.url3+'/'+that.orderId+'/'+that.userId).then(function(result){   
	          that.goodsInfo=result.data.orders
	       })              
       	 })            	 
       }
	},
	mixins:[publicFun],//混入		
	mounted() {
        this.refundId=this.$router.currentRoute.query.refundId;
        this.init()
	}
}	
</script>

<style scoped="" lang="scss">
.tips{background: #FFD630;padding: 35px 20px;}
.wrap{padding: 20px;font-size: 14px;
  .section1{display: flex;justify-content: space-between;}
  .section2{margin-top:18px;display: flex;justify-content: space-between;
    .left{background:#FFEFAC;height: 12px;border-radius: 10px 0 0 10px;}
    .right{background: #FFD630;height: 12px;border-radius:0 10px 10px 0;}
  }
}
.next{height: 10px;background: #f8f8f8;}
.goodsInfo_wrap{padding: 10px 20px;display: flex;align-items: center;
   .left{width: 40px;height: 40px;margin-right: 10px;
     overflow: hidden;background-repeat: no-repeat;background-size:cover;background-position: 50% 50%;}
   .right{margin-left: 10px;
      .word1{margin-bottom: 15px;}
      .word2{color: #F22613;}
   }
}
.tabs_wrap{
	.list{padding: 20px 20px 0;display: flex;
	  .left{img{width: 40px;height: 40px;}}
	}
	.right{padding: 0 20px 20px 20px;border-bottom: 1px solid #f0f0f0;flex: 1;
	  .word1{margin-bottom: 10px;font-size: 14px;}
	  .word2{margin-bottom: 10px;}
	  .imgWrap{display: flex;flex-wrap: wrap;
	    img{width: 80px;height: 80px;display: block;margin-bottom: 10px;margin-right: 5px;}
	  }
	}
}
.ellipsis{display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;}

</style>